<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css形状</title>
    <link rel="stylesheet" href="./css/demo1.css">
</head>

<body>
    <div class="box">
        <div class="oval">椭圆</div>
        <!-- 图形倾斜 文字不倾斜 -->
        <a href="#yolo" class="button">
            <div>Click me</div>
        </a>
        <!-- 将图片切成菱形 -->
        <div class="rhombus">
            <img src="./image/blue3.jpg" alt="rhombus">
        </div>
        <!-- 切角效果 -->
        <div class="corner"></div>
        <div class="corner2"></div>
        <!-- border-image 内联SVG -->
        <div class="bor-img">
            内联SVG
        </div>
        <!-- 梯形标签 -->
        <div class="trapezoid">
            <a>
                梯形标签
            </a>
        </div>
    </div>
</body>

</html>